<template>
  <el-dialog :title="formConfig.title" :width="formConfig.width ||'65%'"
    :visible.sync="formConfig.dialogFormVisible" @close="closeHandle()">
    <el-form ref="form" :model="form" :disabled="formConfig.disabled"
      :size="formConfig.size||'small'" :label-width="formConfig.labelWidth || '100px'">
      <el-row class="box-row" :gutter="formConfig.gutter || 20">
        <el-col :span="formConfig.span || 12" v-for="(item,index) in formConfig.columns"
          :key="index">
          <el-form-item v-if="item.slot" :label="item.label+':'" :key="index" :prop="item.value"
            :rules="item.rules">
            <template slot-scope>
              <slot :name="item.slot" :data="form[item.value]"></slot>
            </template>
          </el-form-item>
          <el-form-item v-else :label="item.label+':'" :key="index" :prop="item.value"
            :rules="item.rules">
            <el-input :disabled="item.disabled" :placeholder="'请输入'+item.label"
              v-model="form[item.value]"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <template slot-scope>
        <slot name="formFooter"></slot>
      </template>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "dialog-c",
  props: {
    formConfig: {
      type: Object,
      default: () => { },
      required: true
    },
    formData: {
      type: Object,
      default: () => { },
      required: true
    },
  },
  watch: {
    formData: {
      handler: function(val) {
        this.form=val
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      form: {},
    }
  },
  methods: {
    closeHandle() {
      // this.dialogForm={}
      this.$refs.form.resetFields();
      this.$emit("update:formData",{})
      // this.$emit("dialogFormChange",{})
    },
    fromValidate() {  //返回验证结果
      let data=null;
      this.$refs.form.validate((valid) => {
        console.log(valid);
        data=valid;
      })
      return data;
    },
    //重置表单
    resetForm() {
      this.$refs.form.resetFields()
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item {
  margin-bottom: 0;
  padding-bottom: 20px;
}

.box-row {
  display: flex;
  flex-wrap: wrap;
}
</style>